import { Button, Box, useColorMode, useColorModeValue, LightMode } from '@chakra-ui/react'

function App() {
  const {colorMode, toggleColorMode} = useColorMode();
  const bgColor = useColorModeValue('pink','skyblue')
  return (
    <div className="App">
      <span>当前颜色模式为{colorMode}</span>
      <LightMode>
        <Button onClick={toggleColorMode}>切换颜色模式</Button>
      </LightMode>
      <Box w="200px" height="200px" bgColor={bgColor}></Box>
    </div>
  );
}

export default App;
